import {View} from "@tarojs/components";
import LgButton from "../../button";
import {LgPopLayer} from "../../popLayer";
import {LgCalendarVertical} from "../LgCalendarVertical";
import "./index.scss"

export interface LgCalendarBProps {
  rangeStart?: string
  rangeEnd?: string
  isOpen: boolean
  confirm: (start: string, end: string) => void
  onClose: () => void
  minDay?: string
  maxDay?: string
}

/**
 * A款组件
 * @returns JSX.Element
 */
export function LgCalendarB(props: LgCalendarBProps) {

  let start = props.rangeStart ? props.rangeStart : ""
  let end = props.rangeEnd ? props.rangeEnd : ""

  const onRangeChange = (s: string, e: string) => {
    start = s
    end = e
  }

  const onOkClick = () => {
    if (props.confirm) {
      props.confirm(start, end)
    }
  }

  return (
    <LgPopLayer titleColor={"#000"} isOpen={props.isOpen} position="bottom" showLayer={props.onClose} showClose
                title="选择日期" customContentClass="lg-calendar-b-select-pop">
      <LgCalendarVertical onRangeChange={onRangeChange} selectMode="range" rangeStart={props.rangeStart}
                          rangeEnd={props.rangeEnd} minDay={props.minDay} maxDay={props.maxDay}/>
      <View className="lg-time-select-footer" style={{display: props.isOpen ? "flex" : "none"}}>
        <LgButton onClick={onOkClick} className="lg-time-select-footer-confirm">确定</LgButton>
      </View>
    </LgPopLayer>
  )
}
